import React from 'react';
import { Modal, Row, Col, Button, Table, Select , DatePicker, Pagination, message, Form, Input, Card, Icon } from 'antd';
import { $http } from 'containers/config/https';
import Moment from 'moment';
import store from 'store';

const { Option } = Select;
const formItemLayout = {    // label 和input宽度
    labelCol: { span:7 },
    wrapperCol: { span: 17 },
};
const FormItem = Form.Item;
const AddInvoices = Form.create()(
    class extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                visible: false,
                tableData: [],
                startDate: undefined, // 开始日期
                endDate: undefined, // 截止日期
                status: undefined, // 单据状态
                rowId: '', // 选中行id
                total: 0, // 总条数
                page: 1, // 页数
                pageSize: 10, // 每页的条数
                stateCode: {},
                locId: '',
                showIcon: false,
            }
            // 药品的数据表头

            this.columnsRight = [
                {
                    key: 1,
                    title: '药品名称',
                    dataIndex: 'stockDesc',
                    align: "center",
                    width: '14%'
                },
                {
                    key: 2,
                    title: '货位号',
                    dataIndex: 'stockBin',
                    align: "center",
                    width: '12%',
                    sorter: (a, b) => a.stockBin - b.stockBin,
                },
                {
                    key: 3,
                    title: '库存大类',
                    dataIndex: 'stkCatDesc',
                    align: "center",
                    width: '12%',
                },
                {
                    key: 4,
                    title: '库存子类',
                    dataIndex: 'stkSubCat',
                    align: "center",
                    width: '12%',
                },
                {
                    key: 5,
                    title: '包装规格',
                    dataIndex: 'stockSpec',
                    align: "center",
                    width: '12%',
                },
                {
                    key: 6,
                    title: '冰结数量(库存单位)',
                    dataIndex: 'accPurQty',
                    align: "center",
                    width: '12%',
                },
                {
                    key: 7,
                    title: '冰结数量(基本单位)',
                    dataIndex: 'accBaseQty',
                    align: "center",
                    width: '12%',
                },
                {
                    key: 8,
                    title: '生产厂家',
                    dataIndex: 'manfDesc',
                    align: "center",
                    width: '14%',
                }
            ]
        }

        componentDidMount() {
            // 获取列表数据
            this.props.onRef(this);
            let leftList = document.querySelectorAll('.leftListHeight  .ant-table-body');
            if(leftList.length>0){
                leftList[0].style.height = store.getState().tableHeight.y - 105 + 'px';
            }
            let listData = document.querySelectorAll('.listHeight  .ant-table-body');
            if(listData.length>0){
                listData[0].style.height = store.getState().tableHeight.y - 105 + 'px';
            }
        }

        //props变化是即使更新props
        componentWillReceiveProps(props){
            this.setState({stateCode: props.SelectData})
        }

        // 打开弹框
        showModal = () => {
            this.setState({
                visible: true
            });
        };

        // 确定
        handleOk = (e) => {
            if (this.state.rowId) {
                // this.props.handleThis.getEchoData(this.state.rowId);
                this.handleCancel()
            } else {
                message.error("请选择一条需要操作的数据");
            }
        };

        // 关闭
        handleCancel = (e) => {
            this.setState({
                visible: false,
                status: undefined,
            });
        };

        // 获取列表数据
        getNewTakeStock =()=> {
            let {page, pageSize} = this.state;
            this.props.form.validateFields((errors, values) => {
                let obj = JSON.parse(JSON.stringify(values));
                if(errors == null){
                    let data = {
                        params: [
                            {
                                locID: obj.locDr ? obj.locDr : undefined,
                                stkCatID: obj.stkCat ? obj.stkCat : undefined,
                                stkSubCatID: obj.stkSubCat ? obj.stkSubCat : undefined,
                                startStkBinID: undefined,
                                endStkBinID: undefined,
                                method: obj.methods ? obj.methods : undefined,
                            }
                        ],
                        pagination: [
                            {
                                pageSize: pageSize,
                                currentPage: page,
                                sort: "",
                                dir: "",
                            }
                        ],
                    };
                    $http.post('urlS', this, {
                        code: "02020156",
                        data: data,
                        success: function (res) {
                            if (+res.errorCode === 0) {
                                if(res.rows.length > 0){
                                    for(var i = 0; i < res.rows.length; i++) {
                                        res.rows[i].key = i+'twig';
                                    }
                                    this.setState({tableData: res.rows, total: res.total});
                                }else {
                                    this.setState({tableData: [], total: 0});
                                    message.error('没数据');
                                }
                            }
                        }
                    })
                }
            });

        };
        save=()=> {
            this.props.form.validateFields((errors, values) => {
                let obj = JSON.parse(JSON.stringify(values));
                if(errors == null){
                    let data = {
                        params: [
                            {
                                locID: obj.locDr ? obj.locDr : undefined,
                                stkCatID: obj.stkCat ? obj.stkCat : undefined,
                                stkSubCatID: obj.stkSubCat ? obj.stkSubCat : undefined,
                                startStkBinID: undefined,
                                endStkBinID: undefined,
                                method: obj.methods ? obj.methods : undefined,
                            }
                        ]
                    };
                    $http.post('urlS', this, {
                        code: "02020157",
                        data: data,
                        success: function (res) {

                            if (+res.errorCode === 0) {
                                message.success(res.errorMessage);
                                this.props.handleThis.getInvoicesList();
                            }
                        }
                    })
                }
            });
        };



        // 设置行属性
        // onClickRow = (record) => {
        //     return {
        //         // 单击行选中
        //         onClick: () => {
        //             if (this.state.rowId === '') {
        //                 // 保存行数据以及ID
        //                 this.setState({rowId: record.ID })
        //             } else {
        //                 if (this.state.rowId !== record.ID ) {
        //                     this.setState({rowId: record.ID })
        //                 }else {
        //                     this.setState({rowId: '' })
        //                 }
        //             }
        //         }
        //     }
        // };

        // // 表格行的类名
        // setRowClassName = (record) => {
        //     return record.ID  === this.state.rowId ? 'clickRowStyle' : '';
        // };

        // 页码改变的回调，参数是改变后的页码及每页条
        onChange = (page, pageSize) => {
            this.setState({page: page, pageSize: pageSize}, () => {
                this.getNewTakeStock();
            })
        };

        // 条数改变的回调
        onShowSizeChange = (current, size) => {
            this.setState({page: current, pageSize: size}, () => {
                this.onChange(current, size)
            })
        };

        // 显示分页总条数
        showTotal(total) {
            return `共 ${total} 条`;
        }

        render() {
            const { getFieldDecorator } = this.props.form;
            return (
                <Modal
                    visible={this.state.visible}
                    onCancel={this.handleCancel}
                    width={1300}
                    className="addPayment"
                    footer={null}
                >
                    <div className="aa" style={{height: '690px'}}>
                        <Row>
                            <Card
                                size="small"
                                title="新增付款单据"
                            >
                                <Col span={18}>
                                    <Form>
                                        <Row >

                                            <Col span={7}>
                                                <FormItem {...formItemLayout} label="科室">
                                                    {getFieldDecorator('locDr',{
                                                        initialValue: undefined,
                                                    })(
                                                        <Select allowClear={true}>
                                                            {this.state.stateCode.loc && this.state.stateCode.loc.map((item, i)=> {
                                                                return <Option value={item.id} key={i}>{item.descripts}</Option>
                                                            })}
                                                        </Select>
                                                    ) }
                                                </FormItem>
                                            </Col>
                                            <Col span={7}>
                                                <FormItem {...formItemLayout} label="库存大类">
                                                    {getFieldDecorator('stkCat',{
                                                        initialValue: undefined,
                                                    })(
                                                        <Select allowClear={true}>
                                                            {this.state.stateCode.stkCat && this.state.stateCode.stkCat.map((item, i)=> {
                                                                return <Option value={item.id} key={i}>{item.descripts}</Option>
                                                            })}
                                                        </Select>
                                                    ) }
                                                </FormItem>
                                            </Col>
                                            <Col span={7}>
                                                <FormItem {...formItemLayout} label="库存子类">
                                                    {getFieldDecorator('stkSubCat',{
                                                        initialValue: undefined,
                                                    })(
                                                        <Select allowClear={true}>
                                                            {this.state.stateCode.stkSubCat && this.state.stateCode.stkSubCat.map((item, i)=> {
                                                                return <Option value={item.id} key={i}>{item.descripts}</Option>
                                                            })}
                                                        </Select>
                                                    ) }
                                                </FormItem>
                                            </Col>
                                            <Col span={7}>
                                                <FormItem {...formItemLayout} label="货位码">
                                                    {getFieldDecorator('huo',{
                                                        initialValue: undefined,
                                                    })(
                                                        <span>
                                                          <Input style={{width: '45%'}} />
                                                          <span style={{width: '10%', textAlign: 'center',  display: 'inline-block'}}>到</span>
                                                          <Input style={{width: '45%'}} />
                                                      </span>
                                                    ) }
                                                </FormItem>
                                            </Col>
                                            <Col span={7}>
                                                <FormItem {...formItemLayout} label="录入方式">
                                                    {getFieldDecorator('methods',{
                                                        initialValue: undefined,
                                                    })(
                                                        <Select allowClear={true}>
                                                            {this.state.stateCode.methods && this.state.stateCode.methods.map((item, i)=> {
                                                                return <Option value={item.id} key={i}>{item.descripts}</Option>
                                                            })}
                                                        </Select>
                                                    ) }
                                                </FormItem>
                                            </Col>
                                        </Row>
                                    </Form>
                                </Col>
                                <Col span={3}  style={{marginLeft: '-50px'}}>
                                    <Row style={{marginTop: '4px'}} className="buttonLeft">
                                        <Button onClick={this.getNewTakeStock}>查询</Button>
                                    </Row>
                                </Col>
                                <Col span={3} style={{textAlign: 'right'}}>
                                    <Row style={{marginTop: '4px'}} className="buttonRight">
                                        <Button onClick={this.save}>保存</Button>
                                    </Row>
                                </Col>
                            </Card>
                        </Row>

                        <Row style={{margin: '0 20px'}}>
                            <Col style={{height: store.getState().tableHeight.y -75 + 'px', border: '1px silver solid'}}>
                                <Table
                                    columns={this.columnsRight}
                                    dataSource={this.state.tableData}
                                    pagination={false}
                                    bordered
                                    scroll={{ y: store.getState().tableHeight.y - 167}}
                                    style={{overflow: 'auto', height: store.getState().tableHeight.y - 117}}
                                    className='listHeight'
                                />
                                <Pagination
                                    showTotal={() => this.showTotal(this.state.total)}
                                    size="small"
                                    showQuickJumper
                                    showSizeChanger
                                    defaultCurrent={1}
                                    current={this.state.page}
                                    total={this.state.total}
                                    onChange={this.onChange}
                                    onShowSizeChange={this.onShowSizeChange}
                                    style={{textAlign: "right", marginRight: '13px'}}
                                />
                            </Col>
                        </Row>
                    </div>
                </Modal>
            )
        }
    }
)
export default AddInvoices